<template>
  <allHead>
    <template v-slot:mid>题目</template>
  </allHead>
  <div id="app">

    <!-- 进度条 -->
    <progress :value="currentQuestionIndex + 1" :max="questions.length"></progress>

    <!-- 显示题目 -->
    <div v-if="currentQuestionIndex < questions.length">
      <div v-if="questions[currentQuestionIndex].type === 'choice'">
        <h3>{{ questions[currentQuestionIndex].question }}</h3>
        <div v-for="(option, index) in questions[currentQuestionIndex].options" :key="index">
          <button @click="handleAnswer(option)" :disabled="answerSubmitted" :class="{
            correct: option === questions[currentQuestionIndex].answer && answerSubmitted,
            incorrect: option !== questions[currentQuestionIndex].answer && option === userAnswer && answerSubmitted
          }">
            {{ option }}
          </button>
        </div>
      </div>

      <div v-if="questions[currentQuestionIndex].type === 'blank'">
        <h3>{{ questions[currentQuestionIndex].question }}</h3>
        <input v-model="userAnswer" placeholder="请输入答案" :disabled="answerSubmitted" />
        <button @click="handleAnswer(userAnswer)" :disabled="answerSubmitted">提交</button>
      </div>

      <div v-if="questions[currentQuestionIndex].type === 'short_answer'">
        <h3>{{ questions[currentQuestionIndex].question }}</h3>
        <textarea v-model="userAnswer" placeholder="简答题" rows="4" :disabled="answerSubmitted"></textarea>
        <button @click="handleAnswer(userAnswer)" :disabled="answerSubmitted">提交</button>
      </div>

      <!-- 答案解析 -->
      <div class="answers" v-if="answerSubmitted">
        <p v-if="isAnswerCorrect" class="correct">答案正确！</p>
        <p v-else class="incorrect">答案错误。正确答案是: {{ questions[currentQuestionIndex].answer }}</p>
        <p><strong>解析:</strong> {{ questions[currentQuestionIndex].explanation }}</p>
      </div>

      <!-- 下一题或提交按钮 -->
      <button v-if="answerSubmitted && currentQuestionIndex < questions.length - 1" @click="nextQuestion">下一题</button>
      <button v-if="answerSubmitted && currentQuestionIndex === questions.length - 1" @click="submitQuiz">打印成绩</button>
    </div>

    <!-- 测试完成 -->
    <div v-else>
      <h2>测试完成！您的总分是：{{ totalScore }}/{{ questions.length }}</h2>
    </div>
  </div>
</template>

<script setup>
import allHead from "@/components/allHead.vue";
import { ref } from 'vue';
import { useQuestionStore } from '@/stores/qusetionStore.js';

const questionStore = useQuestionStore();

//console.log(JSON.stringify(questionStore.allquestion.allquestion));

// 模拟的题目数据（JSON）
//const questionsJson = JSON.stringify(questionStore.allquestion.allquestion);

const questions = questionStore.allquestion.allquestion;  // 将JSON字符串转化为数组
const currentQuestionIndex = ref(0); // 当前题目索引
const userAnswer = ref(''); // 用户的答案
const answerSubmitted = ref(false); // 是否提交答案
const isAnswerCorrect = ref(false); // 是否答对
const totalScore = ref(0); // 总分数

// 处理用户选择的答案
const handleAnswer = (answer) => {
  userAnswer.value = answer;
  const currentQuestion = questions[currentQuestionIndex.value];
  isAnswerCorrect.value = currentQuestion.answer === answer;
  answerSubmitted.value = true;

  // 更新分数
  if (isAnswerCorrect.value) {
    totalScore.value++;
  }
};

// 显示下一题
const nextQuestion = () => {
  if (currentQuestionIndex.value < questions.length - 1) {
    currentQuestionIndex.value++;
    userAnswer.value = '';  // 清空用户答案
    answerSubmitted.value = false; // 重置答案提交状态
    isAnswerCorrect.value = false; // 重置答案正确状态
  }
};

// 提交答题并计算分数
const submitQuiz = () => {
  alert(`测试完成！您的总分是：${totalScore.value}/${questions.length}`);
};
</script>

<style scoped>
#app {
  max-width: 800px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background: #fff;
}

progress {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  margin: 20px 0;
  border-radius: 4px;
  background: #f0f0f0;
}

progress::-webkit-progress-bar {
  background: #f0f0f0;
  border-radius: 4px;
}

progress::-webkit-progress-value {
  background: #409eff;
  border-radius: 4px;
}

h3 {
  color: #333;
  font-size: 18px;
  margin: 20px 0;
  line-height: 1.6;
}

/* 选择题样式 */
button {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 12px 20px;
  border: 1px solid #dcdfe6;
  border-radius: 20px;
  background: #fff;
  color: #606266;
  text-align: left;
  transition: all 0.3s;
}

button:hover:not(:disabled) {
  border-color: #409eff;
  background-color: #ecf5ff;
}

button.correct {
  background: #f0f9eb !important;
  border-color: #67c23a !important;
  color: #67c23a !important;
}

button.incorrect {
  background: #fef0f0 !important;
  border-color: #f56c6c !important;
  color: #f56c6c !important;
}

/* 输入框样式 */
input,
textarea {
  width: 100%;
  padding: 12px;
  margin: 15px 0;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
}

textarea {
  min-height: 100px;
}

/* 操作按钮容器 */
button[type="button"]:not([class]) {
  display: inline-block;
  width: auto;
  margin: 20px 10px 0 0;
  padding: 12px 30px;
  border-radius: 4px;
  background: #409eff;
  color: #fff;
  text-align: center;
}

/* 答案解析样式 */
.answers {
  margin-top: 20px;
  padding: 15px;
  background: #fafafc;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.answers p {
  font-size: 17px;
  margin: 10px 0;
  line-height: 1.5;
}

.correct {
  color: #67c23a;
}

.incorrect {
  color: #f56c6c;
}

/* 导航按钮 */
button:nth-last-child(2),
button:last-child {
  float: none;
  background: #fff;
  border: 1px solid #409eff;
  color: #409eff;
  margin: 20px 10px 0 0;
}

button:nth-last-child(2):hover,
button:last-child:hover {
  background: #409eff;
  color: #fff;
}
</style>